import { createApp, h, ref, getCurrentInstance } from "vue";
import { ElDialog } from "element-plus";
import { loadPlugin } from "../loadPlugin";
import { omit } from 'xe-utils';
import DialogFooter from './DialogFooter.vue';



// 默认配置 */
const defaultOptions = {
  width: '600px',
  center: false,
  footer: true,
  closeOnClickModal: false
}

export function createDialog (options) {
  const context = getCurrentInstance()?.appContext;
  const mergedOptions = { ...defaultOptions, ...options };

  // 状态管理
  const visible = ref(true);
  const dialogOptions = ref(mergedOptions || {});

  // 底部按钮区域
  // 点击取消
  const handleCancel = () => {
    dialogOptions.value?.onCancel?.();
    close();
  };
  
  const Footer = h(DialogFooter, {
    okBtnProps: dialogOptions.value?.okBtnProps || {},
    cancelBtnProps: dialogOptions.value?.cancelBtnProps || {},
    okText: dialogOptions.value?.okText || '确定',
    cancelText: dialogOptions.value?.cancelText || '取消',
    onCancel: () => {
      handleCancel();
    },
    onConfirm: async () => {
      if (dialogOptions.value?.onBeforeOk) {
        const res = await dialogOptions.value?.onBeforeOk?.();
        if (res) {
          close();
          return true;
        } else {
          return false;
        }
      } else {
        console.log(111);
        
        dialogOptions.value?.onConfirm?.();
        close();
        return true;
      }
    }
  });

  // 对话框底部按钮区域-渲染
  const renderFooter = () => {
    if (typeof dialogOptions.value.footer === 'boolean') {
      return dialogOptions.value.footer === false ? {} : { footer: () => Footer };
    } else {
      return {
        footer: () => h(Footer, null, { default: () => h(dialogOptions.value?.footer) })
      };
    }
  };

  const dialog = () => h(
    ElDialog,
    {
      ...omit(dialogOptions.value, [
        'footer',
        'content',
        'onConfirm',
        'onBeforeOk',
        'onCancel',
        'cancelText',
        'okText',
        'okBtnProps',
        'cancelBtnProps'
      ]),
      // visible: visible.value,
      modelValue: visible.value,
      'onUpdate:modelValue': (val) => (visible.value = val)
    },
    {
      // 默认插槽内容
      default: () => dialogOptions.value?.content
        ? typeof dialogOptions.value?.content === 'string'
          ? dialogOptions.value?.content
          : h(dialogOptions.value.content)
        : null,
      // default: () => {
      //   if (!dialogOptions.value?.content) return null;
      //   if (typeof dialogOptions.value.content === 'string') {
      //     return dialogOptions.value.content;
      //   }
      //   if (typeof dialogOptions.value.content === 'function') {
      //     return dialogOptions.value.content(); // 关键：调用函数，返回VNode
      //   }
      //   return h(dialogOptions.value.content);
      // },
      ...renderFooter()  
    }
  );

  // 关闭弹框 并注销
  const close = () => {
    visible.value = false;
    setTimeout(() => {
      app.unmount();
      container.remove();
    }, 200);
  }

  /** 更新对话框 */
  const update = (newProps) => {
    dialogOptions.value = { ...dialogOptions.value, ...newProps };
  }

  const app = createApp(dialog);

  // 全局注册element-plus组件
  loadPlugin(app);

  // 继承上下文
  if (context) {
    app._context = Object.assign({}, context);
    // dialogApp.config.globalProperties = context.config.globalProperties;
  }

  // 创建容器
  const container = document.createElement("div");
  document.body.appendChild(container);
  // 挂载
  app.mount(container);

  return {
    close,
    update,
  };
}